<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome, you have logged in</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hide {
            visibility: hidden;
            width: 0px;
        }
    </style>
</head>
<body class="text-center">
<div class="container text-center">
    <div class="nav flex-column justify-content-center bg-light text-center">
        <!--        {{if .Success}}-->

        <form action="http://localhost:8181/user/update" method="POST" id="updateForm" enctype="multipart/form-data" target="hiddenwin">
<!--        <form id="updateForm" enctype="multipart/form-data">-->
            <div>
                <h3 style="color:darkturquoise">Profile:</h3>
                <!--                <input type="text" class="hide" name="last_profile" value="{{.ProfileName}}" id="profile">-->
                <input class="hide" type="file" name="profile" id="input" onchange="changeImg()">
                <a href="javascript:;"><img id="image" src="./pic/pic1.jpg" alt="upload image" onclick="clickInput()"
                                            height="100px" width="100px"></a>
            </div>

            <div>
                <h3 style="color:cadetblue">Username:</h3>
                <div style="text-align:center;vertical-align:middle;">
                    <input type='text' placeholder="{{printf  %s .Username}}" name="username" id="username"
                           style="text-align: center" disabled>
                </div>
            </div>

            <label>
                <h3 style="color:darkolivegreen">Nickname:</h3>
                <input type="text" value="{{printf  %s .Nickname}}" name="nickname" id="nickname"
                       style="text-align: center">
            </label>

            <div style="padding-top: 10px"><input id="updateBtn" type="submit" value="update"  tyle="color: darkseagreen"></div>
        </form>

        <!--        {{else}}-->
        <!--        <div> Your operation is failed:</div>-->
        <!--        <div>{{.Reason}}</div>-->

        <!--        {{end}}-->
    </div>
</div>

<script>
    const domain = "http://localhost:8181"

    function check() {
        $.ajax({
            url: domain + "/user/token/query",
            method: "GET",
            dataType: "json",
            contentType: "application/json",
            success: function (result, status, xhr) {
                // alert("token query result code: " + result.code + "/data: " + result.data)
                // 存在登陆态则直接跳转index页面
                if (result.code === 0) {
                    refreshUserInfo(result.data)
                } else {
                    window.location.href = "login.html";
                }
            },
            error: function (xhr, status, error) {
                alert('Service not valid...')
            }
        });
    }

    // login status check init
    check();

    // 刷新回显用户登陆后的相关信息
    function refreshUserInfo(user) {
        // $("#username").text("USERNAME: " + user.username);
        // $("#nickname").values("NICKNAME: " + user.nickname);

        // fill user info
        document.getElementById("username").value = user.username
        document.getElementById("nickname").value = user.nickname
        document.getElementById("image").src = "../" + user.profile
    }

    function clickInput() {
        let input = document.getElementById("input");
        input.click();
    }

    function changeImg() {
        let img = new Image()
        img.onload = function () {
            document.getElementById("image").src = this.src
        }
        img.src = (window.URL || window.webkitURL).createObjectURL(input.files[0])
    }

    // $("#updateBtn").click(function () {
    //
    //     $.ajax({
    //         url: domain + "/user/update",
    //         method: "POST",
    //         data: $('#updateForm'),
    //         dataType: "json", //预期服务器返回的数据类型
    //         contentType: "multipart/form-data",
    //
    //         success: function (result, status, xhr) {
    //             if (result.code === 0) {
    //                 alert("您的信息修改成功！")
    //                 location.reload()
    //                 // window.location.href="index.html";
    //             } else {
    //                 alert(result.code + ": " + result.message)
    //             }
    //         },
    //         error: function (xhr, status, error) {
    //             alert("request异常!" + error);
    //         },
    //     });
    // });
</script>
</body>
</html>